<template>
  <div class="manage">
    <el-container class="manage-container">
      <el-header class="header">
        <div class="header-left">
          <div class="logo">
            <img src="../assets/images/heima.b5a855ee.png" alt="" />
          </div>
          <div class="title">
            <h1>电商后台管理系统</h1>
          </div>
        </div>
        <div class="header-right">
          <el-button type="info" @click="loginout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="activeMenu"
            @trans-route="transRoute($event)"
            class="menu"
            width="200px"
            :router="true"
          >
            <!-- 用户管理 -->
            <el-submenu :index="index.toString()" v-for="(item,index) in menuData" :key="item.id">
              <template slot="title"
                ><i
                  class="iconfont"
                  :class="[
                    { 'icon-yonghu1': item.path == 'users' },
                    { 'icon-shangpin': item.path == 'goods' },
                    { 'icon-quanxian': item.path == 'rights' },
                    { 'icon-dingdan1': item.path == 'orders' },
                    { 'icon-shuju': item.path == 'reports' },
                  ]"
                ></i
                >{{ item.authName }}</template
              >
              <template v-if="item.children.length > 0">
                <el-menu-item
                  :index="'/' + item2.path"
                  v-for="item2 in item.children"
                  :key="item2.id"
                  ><i class="iconfont icon-guanli"></i
                  >{{ item2.authName }}</el-menu-item
                >
              </template>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view @go-route="goRouter($event)" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Welcome from './Welcome';
import User from "./users/User";
import Roles from "./rights/Roles";
import Authority from "./rights/Authority";
import GoodsList from "./goods/GoodsList";
import Category from "./goods/Category";
import Param from "./goods/Param";
import AddGoods from "./goods/AddGoods";
import EditGoods from './goods/EditGoods';
import Orders from "./orders/Orders";
import Reports from "./reports/Reports";

export default {
  data: function () {
    return {
      menuData: null,
      activeMenu: this.$route.path,
    };
  },
  methods: {
    getMenus() {
      //获取左侧菜单权限
      this.$axios
        .get("/menus")
        .then((res) => {
          if (res.meta.status == 200) {
            this.menuData = res.data;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    loginout: function () {
      //退出登录
      //调用确认弹框
      this.$confirm("您确认退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.removeItem("token");
        this.$router.push("/login");
      });
    },
    goRouter: function (path) {
      this.$router.push(path);
      this.activeMenu = path;
    },
    transRoute(path) {
      this.activeMenu = path;
    },
  },
  mounted() {
    this.getMenus();
  },
  components: {
    'welcome': Welcome,
    'user-list': User,
    'role-list': Roles,
    "goods-list": GoodsList,
    "autho-list": Authority,
    "goods-category": Category,
    "param-list": Param,
    "add-goods": AddGoods,
    "order-list": Orders,
    "data-report": Reports,
    'edit-goods': EditGoods
  },
};
</script>

<style lang="less" scoped>
.manage {
  height: 100%;
}
.manage-container {
  height: 100%;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background-color: #373d41;
  .header-left {
    display: flex;
    .title {
      line-height: 60px;
      h1 {
        line-height: 22px;
        font-size: 22px;
        font-weight: 400;
      }
    }
  }
  .logo {
    margin-right: 15px;
  }
}

.aside {
  background-color: #333744;
  .menu {
    background-color: #333744;
    .el-submenu {
      width: 200px;
    }
    .el-menu-item {
      &.is-active {
        color: #409eff !important;
        background-color: #333744 !important;
        &:hover {
          background-color: #292c36 !important;
        }
      }
    }
    .iconfont {
      margin-right: 10px;
    }
  }
}
</style>
<style lang="less">
.el-submenu__title,
.el-menu-item {
  color: #fff !important;
  font-size: 12px !important;
  background-color: #333744;
  &:hover {
    background-color: #292c36 !important;
  }
}
.main {
  background-color: #eaedf1;
  .el-card {
    margin-top: 15px;
  }
}
.el-breadcrumb {
  font-size: 12px !important;
}
.el-table th.gutter {
  display: block !important;
}
</style>